<template>
     <div class="container"  @click="handleBannerclick">
            <div class="wrapper">
               <swiper :options="swiperOption">
			    <swiper-slide v-for="(item,index) of imgs" :key="item.index">
			    	<img class="swiper-img" :src="item" />
			    </swiper-slide>
			    <!-- Optional controls -->
			    <div class="swiper-pagination"  slot="pagination"></div>
	         </swiper>
            </div>
     </div>
</template>

<script>
	export default {
	name: 'Gallary',
	props: {
		imgs: {
			type: Array,
			default () {
				return []
			}
		}
	},
	data () {
		return {
			swiperOption: {
				pagination: '.swiper-pagination',
				paginationType: 'fraction',
				observer:true,
                observeParents:true,
			}
		}
	},
	methods: {
		handleBannerclick () {
				this.$emit('close')
			}
	}
}
</script>

<style lang="stylus" scoped>
  .container >>> .swiper-container 
    overflow: inherit
  .container
    position: fixed
    z-index: 99
    display: flex
    flex-direction: column
    justify-content: center
    left: 0
    right: 0
    top: 0
    bottom: 0
    background-color: #000
    .wrapper
	    /*display: flex
	    flex-direction: column
	    justify-content: center*/
     width: 100%
     height: 0
     padding-bottom: 59.25%
     .swiper-img
       width: 100%
     .swiper-pagination
       color: #fff
       bottom: -50px
	
</style>